<template>
  <page-frame>
    <div class="alarmRecord">
      <div class="toptitle">
        <div class="left">报警记录</div>
        <div class="right">
          <div class="btns">
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="order-content">
        <div class="input">
          <el-row>
            <el-col style="width:130px">
              <div class="input-item">
                <el-select style="width:90%!important;"  v-model="serviceId" @change="selectItem" @clear = "clearItem" clearable placeholder="选择条件">
                  <el-option
                    v-for="item in serviceList"
                    :label="item.serviceName"
                    :value="item.serviceId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="serviceId==1">
                <el-cascader
                  expand-trigger="hover"
                  :options="bedList"
                  v-model="queryData.bedInfo"
                  @change="handleChange"
                  placeholder="请选择报警床位"
                >
                </el-cascader>
              </div>
              <div class="input-item" v-show="serviceId==2">
                <el-input
                  v-model="queryData.memberName"
                  style="width:81%!important"
                  placeholder="请填写会员姓名"
                  @keyup.enter.native="search">
                </el-input>
              </div>
              <div class="input-item" v-show="serviceId==3">
                <el-date-picker
                  v-model="alarmTime"
                  type="datetimerange"
                  placeholder="请选择报警时间段"
                  format="yyyy-MM-dd HH:mm"
                  @change="search"
                >
                </el-date-picker>
              </div>
              <div class="input-item" v-show="serviceId==4">
                <el-select style="width:81%!important" clearable @change="search" v-model="queryData.warnType" clearable placeholder="请选择报警类型">
                  <el-option
                    v-for="item in typeList"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="input-item" v-show="serviceId==5">
                <el-select  style="width:81%!important" clearable @change="search" v-model="queryData.isConfirm" clearable placeholder="请选择是否确认">
                  <el-option :value="1" label="确认"></el-option>
                  <el-option :value="0" label="未确认"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <el-button class="query lightGreenBtn" @click="search">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @row-dblclick="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              prop="warnTime"
              label="最近报警时间"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="warnTypeDesc"
              label="报警类型"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="bedNo"
              label="报警床位"
            >
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="会员姓名"
            >
            </el-table-column>
            <el-table-column
              prop="continueTimes"
              label="持续时长"
            >
            </el-table-column>
            <el-table-column
              prop="isConfirm"
              label="是否确认"
            >
            </el-table-column>
            <el-table-column
              prop="remark"
              label="记录内容"
            >
            </el-table-column>
            <el-table-column
              prop="handleEmpTime"
              label="确认员工/时间"
              width="150"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
            >
              <template scope="scope">
                <el-button type="text" size="small" @click.stop="record(scope.row)">记录</el-button>
                <el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>
                <el-button v-if="scope.row.confirmTime==''" type="text" size="small" @click.stop="confirm(scope.row)">确认</el-button>
              </template>
            </el-table-column>
          </el-table>


          <!--报警记录弹框-->
          <el-dialog title="报警记录" v-model="alarmRecord" size="tiny" :close-on-click-modal="false">
            <el-row style="margin-bottom:22px">
              <el-col :span="4" style="text-align: right;margin-right:10px;">
                <label>描述</label>
              </el-col>
              <el-col :span="19">
                <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入记录内容"></el-input>
              </el-col>
            </el-row>
            <el-row style="margin-bottom:22px">
              <el-col :span="4" style="text-align: right;margin-right:10px;">
                <label>处理人</label>
              </el-col>
              <el-col :span="15">
                <el-autocomplete
                  v-model="responsible.empName"
                  :fetch-suggestions="querySearchAsyncs"
                  placeholder="请输入处理人"
                  @select="responsibleSelect"
                  >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-row style="margin-bottom:22px">
              <el-col :span="4" style="text-align: right;margin-right:10px;">
                <label>是否已解决</label>
              </el-col>
              <el-col :span="15">
                <el-radio class="radio" v-model="ruleForm.isSolved" :label="1">是</el-radio>
                <el-radio class="radio" v-model="ruleForm.isSolved" :label="0">否</el-radio>
              </el-col>
            </el-row>
              <span slot="footer" class="dialog-footer">
                <el-button @click="alarmRecord = false">取 消</el-button>
                <el-button class="lightGreenBtn" @click="submitRecord">确 定</el-button>
              </span>
          </el-dialog>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>
<script>
  import bedGuardApi from '../../service/healthManagement/bedGuardApi';
  import teamApi from '../../service/corporation/teamApi';
  import commonJs from '../../config/common.js';
  import consultingComplaintApi from '../../service/serCenter/consultingComplaintApi';
  export default {
    data() {
      return {
        serviceId:1,
        serviceList:[{
          serviceId: 1,
          serviceName: "报警床位",
        },{
          serviceId: 2,
          serviceName: "会员姓名",
        },{
          serviceId: 3,
          serviceName: "报警时间",
        },{
          serviceId: 4,
          serviceName: "报警类型",
        },{
          serviceId: 5,
          serviceName: "是否确认",
        }],
        typeList:[
          {
            id:3,
            name:'在床报警'
          },{
            id:4,
            name:'离床报警'
          }
        ],
        alarmTime:[],
        bedList:[],
        queryData:{
          bedInfo:[],
          bedId: null,
          memberName: "",
          warnStartTime:'',
          warnEndTime:'',
          warnType:null,
          isConfirm:null//1：确认  0 未确认
        },
        alarmRecord:false,
        tableData: [],
        emps:[],
        responsible:{
          empName: "",
        },
        ruleForm:{
          desc: "",
          handleEmId: null,
          isSolved: 0,
          recordId: null
        },
        total:0,
        currentPage: 1,
      }
    },
    methods: {
      init(){
        this.getBedList();
        this.getAlarmRecord(1);
        this.getAllEmployee();
      },
      getBedList(){
        let self = this;
        /*teamApi.getStructureBedroomTreeWithBeds().then(function (response) {
          self.bedList =response.body.data;
          commonJs.changeBedList(self.bedList);
        })*/
        bedGuardApi.getFloorStruct('all').then(function (response) {
          self.bedList =response.body.data;
          commonJs.changeBedList(self.bedList);
        })
      },
      getAlarmRecord(pageNum){
        let self = this;
        bedGuardApi.getAllAlartRecord(10,pageNum,self.queryData).then(
          (response)=>{
            self.tableData = response.data.data.list;
            self.total = response.data.data.total;
            for(let i=0;i<self.tableData.length;i++){
              self.tableData[i].handleEmpTime = (self.tableData[i].confirmEmName=='')?'':self.tableData[i].confirmEmName+'/'+self.tableData[i].confirmTime.substring(0,16);
              self.tableData[i].continueTimes=(self.tableData[i].continueTimes==''?'':self.tableData[i].continueTimes+"分钟");
            }
          }
        );
      },
      search(){
        if(this.alarmTime[0]){
          this.queryData.warnStartTime = commonJs.formatDateTime(this.alarmTime[0]);
        }
        if(this.alarmTime[1]){
          this.queryData.warnEndTime =  commonJs.formatDateTime(this.alarmTime[1]);
        }
        this.getAlarmRecord(this.currentPage);
      },
      handleChange(value) {
        this.queryData.bedId = value[3];
        this.search();
      },
      back(){
        this.$router.push({name:'outBedInduction'});
      },
      selectItem(){
        //清空选项
        this.queryData.bedInfo = [];
        this.queryData.bedId = null;
        this.queryData.memberName = '';
        this.alarmTime = [];
        this.queryData.warnStartTime = '';
        this.queryData.warnEndTime = '';
        this.queryData.warnType = null;
        this.queryData.isConfirm = null;
      },
      clearItem(){
        this.selectItem();
      },
      detail(row){
        this.$router.push({name:'alarmRecordDetail',params:{recordId:row.recordId}});
      },
      confirm(row){
        let self = this;
        bedGuardApi.confirmRecord(row.recordId).then(
          (response)=>{
            self.search();
          }
        );
      },
      record(row){
        this.alarmRecord = true;
        //clear old data
        self.ruleForm={
          desc: "",
          handleEmId: null,
          isSolved: null,
          recordId: null
        };
        this.ruleForm.recordId = row.recordId;
      },
      //submit record
      submitRecord(){
        let self = this;
        bedGuardApi.saveAlarmRecord(self.ruleForm).then(
          (response)=>{
            self.alarmRecord = false;
            self.$message({
              message:'添加记录成功',
              type:'success'
            });
            self.getAlarmRecord(1);
          }
        );
      },
      //double click table
      handleCurrentChange(val) {

      },
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.getAlarmRecord(this.currentPage);
      },
      /**
       * 筛选指派责任人(三个相关的函数)
       */
      querySearchAsyncs(queryString, cb) {
        var emps = this.emps;
        var results = queryString ? emps.filter(this.createStateFilters(queryString)) : emps;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
        console.debug(results);
      }, 1000);
      },
      createStateFilters(queryString) {
        return (state) => {
          return (state.emName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      responsibleSelect(item){
        this.ruleForm.handleEmId = item.emId;
      },
      getAllEmployee(){
        let self = this;
        consultingComplaintApi.getAllStaff(self.responsible).then(
          (response)=>{
            self.emps = response.body.data;
            for(var i=0;i<self.emps.length;i++){
              var emp = self.emps[i];
              emp.value = emp.emName;
            };
          }
        );
      },
    },
    mounted: function () {
      this.init();
    },

  }
</script>
<style>
  @media screen and (max-width:1366px){
    .alarmRecord .el-cascader{
      width:81%!important;
    }
    .alarmRecord .el-cascader .el-input{
      width:100%!important;
    }
  }

  @media screen and (min-width:1367px){
    .alarmRecord .el-cascader{
      width:81%!important;
    }
    .alarmRecord .el-cascader .el-input{
      width:100%!important;
    }
  }
  .alarmRecord .input input{
    display: inline-block;
  }
  .alarmRecord .el-select {
    display: block;
    position: relative;
  }
  .alarmRecord .el-dialog .input-item{
    margin:10px 0 15px 0;
  }
  .alarmRecord .input-item .remind .el-input__inner{
    border:none;
    padding-left:0;
    padding-right:0;
    width:80%;
    font-weight:bold;
    margin-left:60px;
  }
  .alarmRecord .el-dialog .el-radio__input.is-checked .el-radio__inner {
    border-color: #0cb7c6;
    background: #0cb7c6;
  }
  .alarmRecord .el-dialog .el-autocomplete{
    width:100%;
  }
</style>


